<!-- 火灾报警系统 -->
<template>
  <el-row class="panel-group">
    <el-col :span="8" class="border-right">
      <!-- 火警误报率 -->
      <div class="title">火警误报率（7天）</div>
      <div id="falseAlarmRate" class="chart"/>
      <ul class="legend-list">
        <li v-for="(item, index) in falseAlarmRateList" :key="index">
          <i :style="{background: item.color}" />
          <span class="name">{{ item.name }}</span>
          <span class="value">{{ item.value }}</span>
        </li>
      </ul>
    </el-col>
    <el-col :span="8" class="border-right">
      <!-- 异常上报率 -->
      <div class="title">异常上报率（7天）</div>
      <div id="abnormalReportingRate" class="chart"/>
      <ul class="legend-list">
        <li v-for="(item, index) in abnormalReportingRateList" :key="index">
          <i :style="{'background': item.color}" />
          <span class="name">{{ item.name }}</span>
          <span class="value">{{ item.value }}</span>
        </li>
      </ul>
    </el-col>
    <el-col v-loading="patrolLoading" :span="8">
      <div class="selectDate">
        <el-date-picker v-model="selectDate" type="date" format="yyyy-MM" placeholder="选择日期" @change="patrolDateChange"/>
      </div>
      <ul class="selectTabs">
        <li class="active" @click="patrolDateTypeChange">最近一周</li>
        <li @click="patrolDateTypeChange">最近一月</li>
      </ul>
      <ul class="legend">
        <li><span/><span>故障</span></li>
        <li><span/><span>火警</span></li>
      </ul>
      <div id="yearMsgInfo" class="chart"/>
    </el-col>
  </el-row>
</template>
<script>
import echarts from 'echarts'
// import { info } from '@/api/dashboard'
import $ from 'jquery'
export default {
  data() {
    return {
      'falseAlarmRateList': [
        { value: '10%', name: '作业场所扬尘', color: '#F67393' },
        { value: '20%', name: '设备损坏', color: '#58C5EA' },
        { value: '20%', name: '违规操作', color: '#F19D7E' },
        { value: '20%', name: '违规施工', color: '#9FE7BA' },
        { value: '30%', name: '场所环境不良', color: '#FADB5B' }
      ],
      'abnormalReportingRateList': [
        { value: '10%', name: '水池水箱', color: '#F67393' },
        { value: '30%', name: '消火栓管网', color: '#58C5EA' },
        { value: '20%', name: '喷淋管网', color: '#F19D7E' },
        { value: '10%', name: '喷淋泵', color: '#9FE7BA' },
        { value: '30%', name: '稳压泵', color: '#FADB5B' }
      ],
      selectDate: '',
      patrolLoading: false
    }
  },
  computed: {},
  created() {
    this.$nextTick(function() {
      $('.selectTabs li').click(function() {
        $(this).addClass('active')
        $(this).siblings().removeClass('active')
      })
      const falseAlarmRate = echarts.init(document.getElementById('falseAlarmRate'))
      const abnormalReportingRate = echarts.init(document.getElementById('abnormalReportingRate'))
      const yearMsgInfo = echarts.init(document.getElementById('yearMsgInfo'))
      falseAlarmRate.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)',
          position: 'right'
        },
        series: [{
          name: '',
          type: 'pie',
          radius: ['50%', '70%'],
          center: ['48%', '36%'],
          avoidLabelOverlap: false,
          label: {
            show: false
          },
          color: ['#F67393', '#58C5EA', '#F19D7E', '#9FE7BA', '#FADB5B'],
          data: [
            { value: 100, name: '作业场所扬尘' },
            { value: 200, name: '设备损坏' },
            { value: 200, name: '违规操作' },
            { value: 200, name: '违规施工' },
            { value: 300, name: '场所环境不良' }
          ]
        }]
      })

      abnormalReportingRate.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)',
          position: 'right'
        },
        series: [{
          name: '',
          type: 'pie',
          radius: ['50%', '70%'],
          center: ['48%', '36%'],
          avoidLabelOverlap: false,
          label: {
            show: false
          },
          color: ['#F67393', '#58C5EA', '#F19D7E', '#9FE7BA', '#FADB5B'],
          data: [
            { value: 100, name: '水池水箱' },
            { value: 300, name: '消火栓管网' },
            { value: 200, name: '喷淋管网' },
            { value: 100, name: '喷淋泵' },
            { value: 300, name: '稳压泵' }
          ]
        }]
      })
      yearMsgInfo.setOption({
        color: ['#3398DB'],
        tooltip: {
          trigger: 'item',
          show: true,
          formatter: '{b}<br />{a}: {c}次'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [{
              'value': '05-12',
              'textStyle': {
                color: '#999999'
              }
            }, {
              'value': '05-13',
              'textStyle': {
                color: '#999999'
              }
            }, {
              'value': '05-14',
              'textStyle': {
                color: '#999999'
              }
            }, {
              'value': '05-15',
              'textStyle': {
                color: '#999999'
              }
            }, {
              'value': '05-16',
              'textStyle': {
                color: '#999999'
              }
            }, {
              'value': '05-17',
              'textStyle': {
                color: '#999999'
              }
            }, {
              'value': '05-18',
              'textStyle': {
                color: '#999999'
              }
            }],
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [{
          name: '火警',
          type: 'bar',
          barWidth: '20',
          itemStyle: {
            normal: {
              color: '#09DFC0'
            },
            emphasis: {
              color: 'rgba(38,193,201,1)'
            }
          },
          data: [10, 5, 2, 9, 18, 6, 20]
        }, {
          name: '故障',
          type: 'bar',
          barWidth: '20',
          itemStyle: {
            normal: {
              color: '#216EDD'
            },
            emphasis: {
              color: 'rgba(38,193,201,1)'
            }
          },
          data: [10, 4, 20, 8, 12, 5, 2]
        }]
      })
    })
  },
  methods: {
    // 巡检统计日期查询
    patrolDateChange() {
      this.setTimeoutFn('patrolLoading')
    },
    patrolDateTypeChange() {
      this.setTimeoutFn('patrolLoading')
    },
    setTimeoutFn(str) {
      const that = this
      this[str] = true
      setTimeout(function() {
        that[str] = false
      }, 1000)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .tooltip{
    width: 34px;
    height: 20px;
    backgroundColor: #5c9fff;
    position: relative;
    .value{
      width:100%;
      text-align:center
    }
  }
  .el-col{
    position: relative;
    .selectDate{
      position: absolute;
      right: 10px;
      top: 5px;
      width: 150px;
      z-index: 100;
      .el-input{
        width:100%;
      }
    }
  }
  .title{
    width: 50%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    text-align: center;
    font-size: 14px;
  }
  .chart{
    width: 50%;
    height: 220px;
    margin-top: 60px;
    float: left;
  }
  #yearMsgInfo{
    width: 100%;
  }
  .legend-list{
    width: 50%;
    padding:0;
    margin:0;
    margin-top: 120px;
    float: left;
    overflow:hidden;
    li{
      list-style: none;
      margin-top: 15px;
      float: left;
      i{
        width: 16px;
        height: 16px;
        display: block;
        float: left;
        border-radius: 4px;
      }
      span{
        height: 16px;
        line-height: 16px;
        display: block;
        float: left;
        font-size: 14px;
      }
      span.name{
          width: 84px;
          margin: 0 5px;
      }
    }
  }
  .legend{
    position: absolute;
    right: 15px;
    top: 54px;
    overflow: hidden;
    font-size: 14px;
    li{
      height: 24px;
      line-height: 24px;
      padding-right: 4px;
      span{
        display: block;
        float: left;
      }
      span:first-child{
        width: 10px;
        height: 10px;
        margin-top: 7px;
        margin-right: 10px;
        border-radius: 50%;
        background: #20A0FF;
      }
    }
  }
  .selectTabs{
    position: absolute;
    left: 20px;
    top: 5px;
    overflow: hidden;
    font-size: 14px;
    li{
      padding-right: 40px;
      height: 40px;
      line-height: 40px;
      float: left;
      cursor: pointer;
    }
    .active{
      color: #409EFF;
    }
  }
  .border-right{
    border-right: 1px solid #D8D8D8;
  }
</style>
